<template>
  <div>
    <newHeader></newHeader>
    <swiperComponent></swiperComponent>
    <div class="m-content wrapbox clearfix">
      <div class="m-leftbar">
        <div class="m-hotnav">
          <ul class="clearfix">
            <li>
              <a>全部</a>
            </li>
            <li>
              <a>文章</a>
            </li>
            <li>
              <a>日记</a>
            </li>
            <li>
              <a>资讯</a>
            </li>
            <li>
              <a>收藏</a>
            </li>
          </ul>
        </div>
        <div class="articles" v-if="articles && articles.length">
          <ul>
            <li class="article-item" v-for="(article, index) in articles" :key="index">
              <article-block
                :article="article"
                :tags="article.tags || []"
                :comments="article.comments || []"
                @load-comments="loadMoreComment(article)"
                @share="onShare(article)"
                @like="onLike"
                @post-comment="onPostComment"
                @like-comment="onLikeComment"
                @report-comment="onReportComment"
                @delete-comment="onDeleteComment"
                @post-comment-reply="onPostCommentReply"
                @report-reply="onReportReply"
                @post-reply-reply="onPostReplyReply"
                @delete-reply="onDeleteReply">
              </article-block>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import newHeader from '@/components/NewHeader';
  import bottom from '@/components/Bottom';
  import swiperComponent from '@/components/SSwiper';
  import articleBlock from '@/components/article-block/index';

  let STATUS = {
    notStart: '',
    doing: 'doing',
    done: 'done',
    fail: 'fail'
  };

  export default {
    components: {
      bottom,
      newHeader,
      swiperComponent,
      articleBlock
    },
    data() {
      return {
        articles: null
      };
    },
    computed: {},
    methods: {
      onShare(article) {
        // TODO send update share request
        article.shareCount += 1;
      },
      onLike(article, status) {
        // TODO send like request
        for (let item of this.articles) {
          if (item.id === article.id) {
            item.likeDone = !article.likeDone;
            if (item.likeDone) {
              item.likeCount += 1;
            } else {
              item.likeCount -= 1;
            }
            item.likeActionStatus = STATUS.done;
            break;
          }
        }
      },
      onLikeComment(comment, status) {
        comment.likeActionStatus = STATUS.doing;
        // TODO send like request
        setTimeout(() => {
          comment.likeDone = status;
          if (status) {
            comment.likeCount += 1;
          } else {
            comment.likeCount -= 1;
          }
          comment.likeActionStatus = STATUS.done;
        }, 1000);
      },
      onPostComment(article, comment) {
        // TODO post your comment, setTimeout 只是为了模拟请求耗时, 实际开发中需要
        article.postActionStatus = STATUS.doing;
        setTimeout(function () {
          article.comments.unshift({
            user: {
              avatar: 'https://tse4-mm.cn.bing.net/th?id=OIP.7OUBGGzEuAzrCdBS9vcLRQAAAA&w=212&h=212&c=7&o=5&dpr=1.25&pid=1.7',
              nickname: '张三'
            },
            id: 'cid_' + article.comments.length + Date.now(),
            text: comment,
            likeDone: false,
            likeCount: 1,
            likeActionStatus: '',
            postActionStatus: '',
            reportActionStatus: '',
            deleteActionStatus: '',
            canDelete: true,
            replies: []
          });
          article.messageCount += 1; // 以实际返回的评论数为准
          article.postActionStatus = STATUS.done;
        }, 1000);
      },
      // reportArgs 包含，label， value, 和额外输出的text
      onReportComment(comment, reportArgs) {
        comment.reportActionStatus = STATUS.doing;
        // TODO send report request


        setTimeout(() => {
          comment.reportActionStatus = STATUS.done;
        }, 1000);
      },
      onDeleteComment(article, comment) {
        let commentFound = false;
        let count = 0;
        for (let item of article.comments) {
          if (item.id === comment.id) {
            commentFound = true;
            break;
          }
          count += 1;
        }
        if (commentFound) {
          article.messageCount -= (1 + comment.replies.length);
          article.comments.splice(count, 1);
        }
      },
      onPostCommentReply(article, comment, reply) {
        // TODO post your comment reply, setTimeout 只是为了模拟请求耗时, 实际开发中需要
        comment.postActionStatus = STATUS.doing;
        setTimeout(function() {
          comment.replies.unshift({
            user: {
              avatar: 'https://tse2-mm.cn.bing.net/th?id=OIP.klQl5V4aoQ0hk1bA0F66iAAAAA&w=197&h=196&c=7&o=5&pid=1.7',
              nickname: 'tom'
            },
            id: [comment.id, 'rid', comment.replies.length].join('_') + Date.now(),
            text: reply,
            postActionStatus: '',
            reportActionStatus: '',
            deleteActionStatus: '',
            canDelete: true,
            replyTo: null
          });
          comment.postActionStatus = STATUS.done;
          article.messageCount += 1;
        }, 1000);
      },
      onReportReply(reply, reportArgs) {
        reply.reportActionStatus = STATUS.doing;
        // TODO send report request
        setTimeout(() => {
          // this.$message({
          //   type: 'warning',
          //   message: '举报失败，请稍候再试！'
          // });
          reply.reportActionStatus = STATUS.done; // report failed
        }, 1000);
      },
      onDeleteReply(article, comment, reply) {
        let replyFound = false;
        let count = 0;
        for (let item of comment.replies) {
          if (item.id === reply.id) {
            replyFound = true;
            break;
          }
          count += 1;
        }
        if (replyFound) {
          article.messageCount -= 1;
          comment.replies.splice(count, 1);
        }
      },
      onPostReplyReply(article, comment, reply, content) {
        // TODO post your reply reply, setTimeout 只是为了模拟请求耗时, 实际开发中需要
        reply.postActionStatus = STATUS.doing;
        setTimeout(() => {
          comment.replies.unshift({
            user: {
              avatar: 'https://tse1-mm.cn.bing.net/th?id=OIP.9j7o71IyzF7R6d7aTa4iIgHaHa&w=196&h=196&c=7&o=5&pid=1.7',
              nickname: 'jack'
            },
            id: [comment.id, 'rid', comment.replies.length].join('_') + Date.now(),
            text: content,
            postActionStatus: '',
            reportActionStatus: '',
            deleteActionStatus: '',
            canDelete: true,
            replyTo: reply
          });
          reply.postActionStatus = STATUS.done;
          article.messageCount += 1;
        }, 1000);
      },
      loadMoreComment(article) {
        // TODO send load comment request, setTimeout 只是为了模拟请求耗时
        article.loadActionStatus = STATUS.doing;
        setTimeout(() => {
          article.comments.push({
            user: {
              avatar: 'https://tse4-mm.cn.bing.net/th?id=OIP.7OUBGGzEuAzrCdBS9vcLRQAAAA&w=212&h=212&c=7&o=5&dpr=1.25&pid=1.7',
              nickname: '李四'
            },
            id: 'cid_' + article.comments.length + Date.now(),
            text: 'load comment 4',
            likeDone: false,
            likeCount: 1,
            likeActionStatus: '',
            postActionStatus: '',
            reportActionStatus: '',
            deleteActionStatus: '',
            canDelete: true,
            replies: []
          });
          article.nextCommentPage = 2;
          article.loadActionStatus = STATUS.done;
        }, 1000);
      }
    },
    created() {
      let data = require('../../testData/articles');
      this.articles = data.default;
    }
  };
</script>

<style scoped>
  .article-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
  }

  .article-item:last-child {
    border-bottom: 0 none;
  }
</style>
